<template>
	<view class="">
		<search placeholder="请输入仓库名称" @input="inputChange"></search>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" :top="'100rpx'" @up="upCallback">
		  <uni-list>
			  <view class="item" v-for="(item,index) in listdata" :key="item.index">
				  <view class="title-container">
				  	<text class="title">
				  		{{item.warehouseName}}
				  	</text>
				  	<text class="rightContent">
				  		{{item.warehouseStatusStr}}
				  	</text>
				  	
				  </view>
				<u-line color="#efefef" :customStyle="{'margin-bottom': '10rpx','display': 'block',}"></u-line>
			  	<title-content title="关联公司/部门:" :content="item.warehouseDeptName"></title-content>
			  	<title-content title="在库车辆总数/台:" :content="`${item.inWarehouseCount}辆`"></title-content>
			  	<title-content title="已出库车辆总数/台:" :content="`${item.outWarehouseCount}辆`"></title-content>
				<title-content title="已入库车辆总数/台:" :content="`${item.putWarehouseCount}辆`"></title-content>
			  </view>
		  </uni-list>
		</mescroll-uni>
	</view>
</template>

<script>
	import titleContent from 'components/global/title-content.vue'
	import search from '../../../components/search.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			titleContent,
			search
		},
		
	    data() {
			return {
				page: 1,
				listdata: [],
				searchWord: ""
			}
		},
		
		methods: {
			
			
			//获取数据
			getData() {
				this.$u.api.getCarStockCount({
						warehouseName: this.searchWord,
						pageNo: this.page,
					}).then(
						res => {
							if (this.page == 1) {

                this.listdata = [];
              }
              this.listdata = this.listdata.concat(res);
              this.mescroll.endSuccess(res.length);
            }
					)
					.catch(() => {
						this.mescroll.endErr();
					})
			},
			
			//上拉加载回调
			upCallback(page) {
				console.log("触发了上拉加载" + page);
			
				this.page = page.num;
				this.getData();
			},
			//搜索监听事件
			inputChange(value) {
				this.searchWord = value;
				this.getData();
			}

		}
	}
	
</script>

<style>
	.title-container {
		display: flex;
		align-items: center;
	}
	.title {
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}
	.rightContent {
		margin-right: 10rpx;
		justify-content: flex-end;
	}
</style>
